<template>
  <div class="flex flex-column" style="width: 100%; height: 100%">
    <antd-form
      v-model="formData"
      :options="formOptions"
      @submit="() => $refs.table.load()"
      class="flex-fixed"
      style="margin-bottom: 15px"
    />
    <vex-table
      class="flex-auto-height"
      ref="table"
      :columns="columns"
      :show-toolbar="false"
      :fetch-params="paramsData"
      :fetch="getTableAsync"
      @vue:mounted="() => $refs.table.load()"
    >
      <template #action="{ scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
      </template>
    </vex-table>
  </div>
</template>

<script>
import VexTable from '@gis/lib/components/vex-table/index.vue';
import { getEnumText } from '@gis/lib/enums/index.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { realityUnitPageList } from '@gis/lib/api';
import { openUnitDetails } from './index.js';

export default {
  name: 'unit-page-list',
  components: { VexTable },
  data() {
    return {
      formData: {},
      columns: [
        { title: '单位名称', dataIndex: 'name', width: 200 },
        // { title: '管辖社区名称', dataIndex: 'community_area_name' },
        // { title: '许可证备案号', dataIndex: 'license_num' },
        // { title: '社会信用代码', dataIndex: 'social_credit_code' },
        {
          title: '证件类型',
          dataIndex: 'certificate_nature',
          customRender: (v) => getEnumText('certificateNature', v),
        },
        { title: '负责人', dataIndex: 'person' },
        { title: '联系方式', dataIndex: 'phone' },
        { title: '营业状态', dataIndex: 'business_status', customRender: (v) => getEnumText('businessStatus', v) },
        // { title: '主体状态', dataIndex: 'license_status', customRender: (v) => getEnumText('licenseStatus', v) },
        // { title: '主体业态', dataIndex: 'formatName' },
        { title: '更新时间', dataIndex: 'modify_time', width: 200 },
        { title: '操作', scopedSlots: { customRender: 'action' } },
      ],
      formOptions: [
        {
          component: 'a-input',
          field: 'name',
          label: '单位名称',
        },
        {
          component: 'a-input',
          label: '负责人',
          field: 'person',
        },
      ],
    };
  },
  computed: {
    paramsData() {
      const { area_code } = useUserInfoStore();
      return Object.assign({}, { area_code: area_code }, this.formData);
    },
  },
  methods: {
    details(data) {
      openUnitDetails(data);
    },
    async getTableAsync(params) {
      return await handleTableRes(realityUnitPageList, params);
    },
  },
};
</script>

<style scoped></style>
